<template>
  <div>
<div>
  <el-row>
    <el-col span="15">
    <el-form ref="form" label-width="150px" style="width:400px;text-align:center">
  <el-form-item label="根据电话号码查询" ><el-input v-model.number="tel" placeholder="查询所有用户"></el-input></el-form-item>
    <el-button type="primary" @click="getByTel">查询</el-button>
  </el-form>
    </el-col>
    <el-col span="9" style="text-align: right">
    <el-form ref="form" label-width="150px" style="width:400px;text-align:center">
    <el-form-item label="根据身份证号查询" ><el-input v-model="cid" placeholder="查询所有用户"></el-input></el-form-item>
    <el-button type="primary" @click="getByCid">查询</el-button>
  </el-form>
    </el-col>
  </el-row>
  <div>
    <el-button-group>
      <el-button type="primary" @click="getIsDel()">查询在住人员</el-button>
      <el-button type="primary" @click="getAll()">查询所有顾客</el-button>
    </el-button-group>
  </div>


</div>
    <hr>
  <div v-if="this.isShow">
  <el-descriptions title="用户信息">
    <el-descriptions-item label="身份证号" >{{cus.cid}}</el-descriptions-item>
    <el-descriptions-item label="用户名" >{{cus.name}}</el-descriptions-item>
    <el-descriptions-item label="手机号">{{cus.telnum}}</el-descriptions-item>
    <el-descriptions-item label="vip等级">
      <el-tag size="small">{{cus.grade1.gradename}}</el-tag>
    </el-descriptions-item>

  <el-descriptions-item label="享受折扣">{{cus.grade1.discount}} 折</el-descriptions-item>
    <el-descriptions-item label="是否在住" >{{isDel}} </el-descriptions-item>
  </el-descriptions>
  </div>
    <div v-if="this.isTableShow">
      <el-table
          :data="allCus"
          border
          style="width: 100% ; margin: auto">
        <el-table-column
            prop="cid"
            label="身份证号"
            width="100">
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
            width="100">
        </el-table-column>
        <el-table-column
            prop="telnum"
            label="电话号码"
            width="150">
        </el-table-column>
        <el-table-column
            prop="isdel"
            label="是否在住"
            width="100">
        </el-table-column>
        <el-table-column
            prop="grade1.gradename"
            label="vip等级"
            width="100">
        </el-table-column>
        <el-table-column
            prop="grade1.discount"
            label="享受折扣"
            width="100">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import instance from "@/untils";

export default {
  name: "GetCus",
  methods:{
      getByTel(){
        instance.get("/cus/getByTel/"+this.tel).then(res=>{
          this.isTableShow=false;
          this.allCus=[]
          this.cus=res.data.data;
          if(res.data.status==200){
            this.$message({
              message:res.data.msg,
              type:"success"
            });
            this.isShow=true;
          }
          if(res.data.status==500){
            this.$message({
              message:res.data.msg,
              type:"info"
            });
          }
        })
      },
    getByCid(){
      instance.get("/cus/getById/"+this.cid).then(res=>{
        this.isTableShow=false;
        this.allCus=[]
        this.cus=res.data.data;
        if(res.data.status==200){
          this.$message({
            message:res.data.msg,
            type:"success"
          });
          this.isShow=true;
        }
        if(res.data.status==500){
          this.$message({
            message:res.data.msg,
            type:"info"
          });
        }
      })
    },
    getAll(){
        this.allCus=[];
        this.cus=[];
        this.isShow=false;

      instance.get('/cus/getAll').then(res=>{
        this.allCus=res.data.data;
        if(res.data.status==200) {
          this.$message({
            message: res.data.msg,
            type: "success"
          });

          this.isTableShow=true;
        }
        if(res.data.status==500){
          this.$message({
            message:res.data.msg,
            type:"info"
          });
        }
      })
    },
    getIsDel(){
      this.allCus=[];
      this.cus=[];
      this.isShow=false;
      this.isTableShow=false;
      instance.get('/cus/getIsDel').then(res=>{
        this.allCus=res.data.data;
        if(res.data.status==200) {
          this.$message({
            message: res.data.msg,
            type: "success"
          });

          this.isTableShow=true;
        }
        if(res.data.status==500){
          this.$message({
            message:res.data.msg,
            type:"info"
          });
        }
      })


    }
  },
  data(){
    return{
      cus:{},
      tel:'',
      cid:'',
      isShow:false,
      isTableShow:false,
      allCus:[]
    }
  },
  computed:{
    isDel(){
      return this.cus.isdel==1?'是':'否'
    },
    isIn(){
      return this.allCus.isdel==1?'是':'否'
    }
  }
,
  created() {

  }
}
</script>

<style scoped>

</style>